import React from 'react';
import styles from './index.module.scss';
import {Dropdown, Menu, Avatar, Tabs} from 'antd';
import IconFont from '@/components/IconFont';
import {
  CaretDownOutlined, SettingOutlined, UserOutlined, PlusOutlined,
  EditOutlined, DeleteOutlined
} from '@ant-design/icons';
import {Button, Card, Space} from "@/components/wocloud-antd";
import EnumRouter from "@/config/EnumRouter";

/**
 * 空间广场
 * @constructor
 */
export default function SpaceWork({history}) {
  return <div className={styles.box}>
    <header>
      <h4>空间广场</h4>
      <Space>
        <Button icon={<SettingOutlined/>}>组织管理</Button>
        <Button icon={<UserOutlined/>}>邀请同事</Button>
        <Button icon={<PlusOutlined/>}>创建空间</Button>
        <Dropdown
          overlay={<Menu>
            <Menu.Item
              icon={<IconFont type={'icon-current'} style={{color: '#25b1dc'}}/>}>
              932051163@qq.com
            </Menu.Item>
            <Menu.Item style={{borderTop: '1px solid #ccc'}}>新建组织</Menu.Item>
          </Menu>}
        >
          <Button>
            组织切换
            <CaretDownOutlined/>
          </Button>
        </Dropdown>
      </Space>
    </header>
    <section>
      <div className={styles.content}>
        <div className={styles.messageTip}>
          当前组织为试用版
        </div>
        <div className={styles.cardBox}>
          <h3>我的空间</h3>
          <div>
            <Card
              style={{width: '30%'}}
              bodyStyle={{
                padding: 0
              }}
              className={styles.cardItem}
            >
              <div
                className={styles.cardContent}
                onClick={() => history.push(EnumRouter.group_home)}
              >
                <Avatar
                  className={styles.pic}
                  src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                />
                <dl>
                  <dt>第一个空间</dt>
                  <dd className={'text-ellipsis'}>系统自动创建的空间....</dd>
                </dl>
              </div>
              <div className={styles.cardActions}>
                <span className={styles.time}>2020.8.26</span>
                <Space>
                  <SettingOutlined key="setting"/>
                  <DeleteOutlined key="edit"/>
                </Space>
              </div>
            </Card>
          </div>
        </div>

      </div>
      <div className={styles.demos}>
        <Card
          title={'典型案例'}
        >
          典型案例
        </Card>
        <br/>
        <Card>
          <Tabs
            defaultActiveKey={'product'}
          >
            <Tabs.TabPane
              tab={'产品动态'}
              key={'product'}
            >
              产品动态
            </Tabs.TabPane>
            <Tabs.TabPane
              tab={'快速入门'}
              key={'help'}
            >
              快速入门
            </Tabs.TabPane>
          </Tabs>
        </Card>

      </div>
    </section>

  </div>
}
